<template>
  <div class="lcsMain">
    <!-- 第一部分粗调 -->
    <div v-for="(item, topKey) in lcsTop" :key="topKey" :style="[{ width: topKey== 'bank7' || topKey== 'bank8' || topKey== 'bank9' || topKey== 'bank10' || topKey== 'bank11'  ? '6%' : '10%' }]" class="lcsMain-item">
      <!-- 上面的块 -->
      <div class="lcsItemBack">{{ topKey }}</div>
      <!-- 上集管 -->
      <div class="lcsTopMain">
        <div v-for="(itemChild, index) in item" :key="index" :style="{left: itemChild.left }" :class="[ itemChild.flag == 0? 'valveNoUse' : 'valveIsUse' , 'lcsTopItem']">
          <!-- <el-tooltip :content="itemChild.temp" class="item" effect="dark" placement="top">
            <div style="height: 30px; width: 10px"></div>
          </el-tooltip> -->
        </div>
      </div>
      <!-- 中间红线 -->
      <div class="valveLine"></div>
      <!-- 下集管 -->
      <div class="lcsDownMain">
        <div v-for="(downChild, index) in lcsDown[topKey]" :key="index" :style="{left: downChild.left}" :class="[ downChild.flag == 0? 'valveNoUse' : 'valveIsUse' , 'lcsDownItem']">
          <!-- <el-tooltip :content="downChild.temp" class="item" effect="dark" placement="bottom">
            <div style="height: 30px; width: 10px"></div>
          </el-tooltip> -->
        </div>
      </div>
    </div>
    <!-- 第二部分精调 -->
    <div v-for="(item, topKey) in jingTiaoTop" :key="topKey" class="jingMain-item">
      <!-- 上面的块 -->
      <div class="lcsItemBack">{{ topKey }}</div>
      <!-- 上集管 -->
      <div class="lcsTopMain">
        <div v-for="(itemChild, index) in item" :key="index" :style="{left: itemChild.left}"  :class="[ itemChild.flag == 0? 'valveNoUse' : 'valveIsUse' , 'lcsTopItem']">
          <!-- <el-tooltip :content="itemChild.temp" class="item" effect="dark" placement="top">
            <div style="height: 30px; width: 10px"></div>
          </el-tooltip> -->
        </div>
      </div>
      <!-- 中间红线 -->
      <div class="valveLine"></div>
      <!-- 下集管 -->
      <div class="lcsDownMain">
        <div v-for="(downChild, index) in jingTiaoDown[topKey]" :key="index" :style="{left: downChild.left}" :class="[ downChild.flag == 0? 'valveNoUse' : 'valveIsUse' , 'lcsDownItem']">
          <!-- <el-tooltip :content="downChild.temp" class="item" effect="dark" placement="bottom">
            <div style="height: 30px; width: 10px"></div>
          </el-tooltip> -->
        </div>
      </div>
    </div>
    <div class="kaiguan">
      <div class="open-item">开</div>
      <div class="off-item">关</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tempSwitch: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      lcsTop: {
        bank1: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank2: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank3: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank4: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank5: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank6: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank7: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank8: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank9: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank10: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank11: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank12: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank13: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank14: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank15: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank16: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank17: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ]
      },
      lcsDown: {
        bank1: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank2: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank3: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank4: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank5: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank6: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank7: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank8: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank9: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank10: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank11: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "12%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "36%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "60%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "80%",
            flag: 0
          }
        ],
        bank12: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank13: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank14: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank15: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank16: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ],
        bank17: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "9%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "19%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "27%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "37%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "45%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "54.4%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "63%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "72%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "81%",
            flag: 0
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "91%",
            flag: 0
          }
        ]
      },
      jingTiaoTop: {
        bank18: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "10%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "22%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "33%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "43%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "53%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "63%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "73%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "85%", // 距离左边的距离
            flag: 0 // 切换图片
          }
        ],
        bank19: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "10%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "22%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "33%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "43%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "53%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "63%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "73%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "85%", // 距离左边的距离
            flag: 0 // 切换图片
          }
        ]
      },
      jingTiaoDown: {
        bank18: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "10%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "22%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "33%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "43%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "53%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "63%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "73%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "85%", // 距离左边的距离
            flag: 0 // 切换图片
          }
        ],
        bank19: [
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "10%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "22%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "33%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "43%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "53%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "63%", // 距离左边的距离
            flag: 0 // 切换图片
          },
          {
            value: 0,
            temp: "0", // 温度数据
            left: "73%",
            flag: 0
          },
          {
            value: 0, // 值
            temp: "0", // 温度数据
            left: "85%", // 距离左边的距离
            flag: 0 // 切换图片
          }
        ]
      }
    };
  },
  watch: {
    tempSwitch: {
      handler(newVal, oldVal) {
        if (newVal && newVal != oldVal) {
          if (
            this.tempSwitch.valveStatusDnFZ == null ||
            this.tempSwitch.valveStatusDnRZ == null ||
            this.tempSwitch.valveStatusUpFZ == null ||
            this.tempSwitch.valveStatusUpRZ == null ||
            this.tempSwitch.valvetempall == null
          ) {
            return;
          }
          let valveStatusDnFZ = this.tempSwitch.valveStatusDnFZ.split("");
          let valveStatusDnRZ = this.tempSwitch.valveStatusDnRZ.split("");
          let valveStatusUpFZ = this.tempSwitch.valveStatusUpFZ.split("");
          let valveStatusUpRZ = this.tempSwitch.valveStatusUpRZ.split("");
          let valvetempall = this.tempSwitch.valvetempall.split("&");
          let upi = 0;
          let dni = 0;
          for (const key in this.lcsTop) {
            this.lcsTop[key].map((item, index) => {
              item.temp = valvetempall[upi] || "0";
              item.flag = valveStatusUpRZ[upi] || "0";
              upi++;
            });
            this.lcsDown[key].map((item, index) => {
              item.temp = valvetempall[dni] || "0";
              item.flag = valveStatusDnRZ[dni] || "0";
              dni++;
            });
          }
          let upj = 0;
          let dnj = 0;
          for (const key in this.jingTiaoTop) {
            this.jingTiaoTop[key].map((item, index) => {
              item.temp = valvetempall[upj + 50] || "0";
              item.flag = valveStatusUpFZ[upj] || "0";
              upj++;
            });
            this.jingTiaoDown[key].map((item, index) => {
              item.temp = valvetempall[dnj + 50] || "0";
              item.flag = valveStatusDnFZ[dnj] || "0";
              dnj++;
            });
          }
        }
      },
      deep: true
    }
  }
};
</script>

<style>
.lcsMain {
  width: 100%;
  height: 250px;
}
.lcsMain-item {
  width: 8.2%;
  display: inline-block;
  background-color: black;
  float: left;
  margin-bottom: 2px;
}
.jingMain-item {
  width: 15%;
  display: inline-block;
  background-color: black;
  float: left;
  margin-bottom: 2px;
}
.lcsItemBack {
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #fff;
  border: 1px solid #34519b;
  background: #0b243e;
  border-radius: 2px;
  margin-bottom: 10px;
}
.lcsTopMain,
.lcsDownMain {
  height: 34px;
  position: relative;
}
.lcsTopItem,
.lcsDownItem {
  width: 12px;
  height: 30px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  text-align: center;
  position: absolute;
}
.lcsDownItem {
  transform: rotate(180deg);
}
.valveLine {
  border-bottom: 8px solid #d9001b;
  margin: 2px 0;
}
.kaiguan {
  display: inline-block;
  float: left;
  margin-left: 10px;
  margin-top: 22px;
}
.open-item,
.off-item {
  width: 160px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #34519b;
  text-align: center;
}
.open-item {
  background-color: #2f89fc;
}
.off-item {
  background-color: #aaaaaa;
}
</style>
